<template>
  <!-- 主机查看详情对话框 -->
  <el-dialog
    :visible.sync="hostCreatedDialogVisible"
    top="70px"
    width="50%"
    @open="open()"
    :before-close="closeDialogCan"
  >
    <span class="main">
      <!-- 主机基本信息 -->
      <el-form
        :model="hostForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        inline
        :show-message="false"
      >
        <div class="info hostInfo">
          <div class="infoTitle">
            <i class="el-icon-info"></i>
            <h4>{{ $t("hostDialog.title.basic") }}</h4>
          </div>
          <div class="infoContent">
            <div>
              <b>{{ $t("hostDialog.form.name") }}</b
              >：<span class="myContent"
                ><el-input size="mini" v-model="hostForm.name"></el-input
              ></span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.ip") }}</b
              >：<span class="myContent">
                <el-form-item class="validate" prop="ip">
                  <el-input
                    placeholder="192.168.6.203"
                    style="width: 100%"
                    size="mini"
                    v-model="hostForm.ip"
                  ></el-input>
                </el-form-item>
              </span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.descript") }}</b
              >：<span class="myContent"
                ><el-input size="mini" v-model="hostForm.description"></el-input
              ></span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.mac") }}</b
              >：<span class="myContent">
                <el-form-item class="validate" prop="mac_address">
                  <el-input
                    placeholder="74-D4-35-F4-2B-6A"
                    style="width: 100%"
                    size="mini"
                    v-model="hostForm.mac_address"
                  ></el-input>
                </el-form-item>
              </span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.operator") }}</b
              >：<span class="myContent"
                ><el-input
                  size="mini"
                  v-model="hostForm.service_provider"
                ></el-input
              ></span>
            </div>
            <!-- <div>
            <b>部署国家</b>：<span class="myContent"
              ><el-input size="mini" v-model="hostForm.address"></el-input></span>
          </div> -->
            <div>
              <b>{{ $t("hostDialog.form.bandwidth") }}</b
              >：<span class="myContent"
                ><el-input size="mini" v-model="hostForm.wide_band"></el-input
              ></span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.price") }}</b
              >：<span class="myContent"
                ><el-input size="mini" v-model="hostForm.price"></el-input
              ></span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.time") }}</b
              >：<span class="myContent">
                <el-date-picker
                  v-model="hostForm.due_date"
                  type="date"
                  :placeholder="$t('hostDialog.form.date')"
                  size="mini"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.port") }}</b
              >：<span class="myContent"
                ><el-input size="mini" v-model="hostForm.port"></el-input
              ></span>
            </div>
          </div>
        </div>
        <!-- 系统信息 -->
        <div class="info systemInfo">
          <div class="infoTitle">
            <i class="el-icon-info"></i>
            <h4>{{ $t("hostDialog.title.system") }}</h4>
          </div>
          <div class="infoContent">
            <div>
              <b>{{ $t("hostDialog.form.system") }}</b
              >：<span class="myContent">
                <el-select
                  size="small"
                  v-model="hostForm.operating_system"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <!-- <el-input
                  size="mini"
                  v-model="hostForm.operating_system"
                ></el-input> -->
              </span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.account") }}</b
              >：<span class="myContent"
                ><el-input size="mini" v-model="hostForm.username"></el-input
              ></span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.password") }}</b
              >：<span class="myContent"
                ><el-input size="mini" v-model="hostForm.password"></el-input
              ></span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.cpu") }}</b
              >：<span class="myContent"
                ><el-input size="mini" v-model="hostForm.cpu"></el-input
              ></span>
            </div>
            <div>
              <b>{{ $t("hostDialog.form.memory") }}</b
              >：<span class="myContent"
                ><el-input size="mini" v-model="hostForm.memory"></el-input
              ></span>
            </div>
          </div>
        </div>
        <!-- 其他信息 -->
        <div class="info otherInfo">
          <div class="infoTitle">
            <i class="el-icon-info"></i>
            <h4>{{ $t("hostDialog.title.rely") }}</h4>
          </div>
          <div class="aboutTaskList">
            <!-- <div class="content content2"> -->
            <!-- <h3 class="aboutTaskTitle">依赖库</h3> -->
            <el-table
              :data="hostForm.dependent_file"
              style="width: 100%"
              border
            >
              <el-table-column :label="$t('hostDialog.form.yl_name')">
                <template slot-scope="{ row }">
                  <el-input size="mini" v-model="row.name"></el-input>
                </template>
              </el-table-column>
              <el-table-column :label="$t('hostDialog.form.yl_descript')">
                <template slot-scope="{ row }">
                  <el-input size="mini" v-model="row.description"></el-input>
                </template>
              </el-table-column>
            </el-table>
            <el-button
              type="success"
              size="nimi"
              style="width: 100%"
              icon="el-icon-plus"
              @click="adddependent_file"
              >{{ $t("hostDialog.btn.add") }}</el-button
            >
            <!-- </div> -->
          </div>
        </div>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialogCan">{{
        $t("hostDialog.btn.cancel")
      }}</el-button>
      <el-button type="warning" plain @click="resetForm">{{
        $t("hostDialog.btn.reset")
      }}</el-button>
      <el-button type="primary" @click="createdHost" style="width: 200px">{{
        hostRow ? $t("hostDialog.btn.save") : $t("hostDialog.btn.create")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["hostCreatedDialogVisible", "hostRow"],
  data() {
    // ip地址的验证规则
    var validateIP = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入IP地址"));
      } else {
        let ipTest = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g; //匹配IP地址的正则表达式
        if (ipTest.test(value)) {
          if (
            RegExp.$1 < 256 &&
            RegExp.$2 < 256 &&
            RegExp.$3 < 256 &&
            RegExp.$4 < 256
          ) {
            callback();
          } else {
            callback(new Error("请输入正确的IP格式"));
          }
        } else {
          callback(new Error("请输入正确的IP格式"));
        }
      }
    };
    // mac地址的验证规则
    var validateMAC = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入MAC地址"));
      } else {
        let reg1 =
          /^[A-Fa-f0-9]{1,2}\-[A-Fa-f0-9]{1,2}\-[A-Fa-f0-9]{1,2}\-[A-Fa-f0-9]{1,2}\-[A-Fa-f0-9]{1,2}\-[A-Fa-f0-9]{1,2}$/;

        let reg2 =
          /^[A-Fa-f0-9]{1,2}\:[A-Fa-f0-9]{1,2}\:[A-Fa-f0-9]{1,2}\:[A-Fa-f0-9]{1,2}\:[A-Fa-f0-9]{1,2}\:[A-Fa-f0-9]{1,2}$/;
        if (reg1.test(value) || reg2.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的MAC格式"));
        }
      }
    };
    return {
      options: ["windows", "linux"],
      hostForm: {},
      rules: {
        ip: [{ validator: validateIP, trigger: "blur" }],
        mac_address: [{ validator: validateMAC, trigger: "blur" }],
      },
    };
  },
  methods: {
    open() {
      if (this.hostRow) {
        if (typeof this.hostRow.dependent_file == "string") {
          this.hostRow.dependent_file = JSON.parse(this.hostRow.dependent_file);
        }
        for (let key in this.hostForm) {
          this.hostForm[key] = this.hostRow[key];
        }
        this.hostForm.id = this.hostRow.id;
      } else {
        this.hostForm = {
          name: "", // 主机名
          ip: "", // 主机IP
          description: "", // 主机描述
          service_provider: "", // 运营商
          mac_address: "", // MAC
          wide_band: "", // 带宽
          price: "", // 价格
          due_date: "", // 到期时间
          port: "", // 端口号
          operating_system: "windows", // 操作系统
          username: "", // 主机账号
          password: "", // 主机密码
          cpu: "", // CPU
          memory: "", // 内存名称
          dependent_file: [], // 依赖库
        };
      }
      console.log(this.hostForm);
    },

    //添加依赖库
    adddependent_file() {
      this.hostForm.dependent_file.push({ name: "", description: "" });
    },
    // 重置按钮
    resetForm() {
      this.hostForm = {
        name: "", // 主机名
        ip: "", // 主机IP
        description: "", // 主机描述
        // address: "", // 部署国家
        service_provider: "", // 运营商
        mac_address: "", // MAC
        wide_band: "", // 带宽
        price: "", // 价格
        due_date: "", // 到期时间
        port: "", // 端口号
        operating_system: "", // 操作系统
        username: "", // 主机账号
        password: "", // 主机密码
        cpu: "", // CPU
        memory: "", // 内存名称
        dependent_file: [], // 依赖库
      };
    },
    // 创建
    createdHost() {
      console.log(this.hostForm.dependent_file);
      // this.hostForm.dependent_file = [];
      this.hostForm.dependent_file = JSON.stringify(
        this.hostForm.dependent_file
      );
      console.log(this.hostForm);
      this.$refs.ruleForm.validate((valid) => {
        if (!valid)
          return this.$message.warning(this.$t("hostDialog.message.formatErr"));
        this.$http.post("/host/created", this.hostForm).then((res) => {
          if (res.data.code == 0) {
            if (this.hostRow) {
              this.$message.success(this.$t("hostDialog.message.editSucc"));
            } else {
              this.$message.success(this.$t("hostDialog.message.creSucc"));
            }
            this.resetForm();
            this.closeDialog();
          } else {
            if (this.hostRow) {
              this.$message.error(this.$t("hostDialog.message.editErr"));
            } else {
              this.$message.error(this.$t("hostDialog.message.creErr"));
            }
          }
        });
      });
    },
    // 关闭弹出框
    closeDialog() {
      // console.log(this.hostForm);
      this.$emit("closeDialog");
    },
    closeDialogCan() {
      console.log("before-close");
      this.$emit("closeDialog", "1");
    },
  },
};
</script>

<style lang='less' scoped>
.main {
  overflow-x: hidden;
  overflow-y: scroll;
  display: block;
  margin-top: -20px;
  // height: 640px;
  &::-webkit-scrollbar {
    display: none;
  }
  .info {
    margin-top: 20px;
    b {
      display: inline-block;
      // background-color: yellowgreen;
      text-align: right;
      width: 80px;
      // background-color: #87c0e6;
    }
    .infoTitle {
      display: flex;
      margin-bottom: 10px;
      h4 {
        font-size: 18px;
        line-height: 14px;
      }
    }
    .infoContent {
      display: flex;
      flex-wrap: wrap;
      padding-left: 0;
      div {
        width: 33%;
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        white-space: nowrap;
        .myContent {
          .validate {
            width: calc(100% - 100px);
            // background-color: #bae687;
            .el-form--inline .el-form-item__content {
              display: block !important;
            }
          }
          .el-input {
            // background-color: #87c0e6;
            width: calc(100% - 100px);
          }
        }
      }
    }
  }
  .aboutTaskList {
    .content {
      display: flex;
      margin-top: 20px;
      .aboutTaskTitle {
        width: 40px;
        padding: 10px;
        height: 120px;
        border-radius: 20px 0px 0px 60px;
        text-align: center;
        color: #606266;
      }
    }
    .content1 {
      .aboutTaskTitle {
        background-color: #e69d87;
      }
      .el-table {
        border: 1px solid #e69d87;
      }
    }
    .content2 {
      .aboutTaskTitle {
        background-color: #bae687;
      }
      .el-table {
        border: 1px solid #bae687;
      }
    }
    .content3 {
      .aboutTaskTitle {
        background-color: #87c0e6;
      }
      .el-table {
        border: 1px solid #87c0e6;
      }
    }
  }
}
</style>